<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>




  <script src="../assets/js/example.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
  <article class="article-small">
    <section class="page-section">
      <h1 class="header-dividing">内容列表视图</h1>
      <table class="table">
        <tr>
          <td>头部</td>
          <td>包含当前列表标题</td>
        </tr>
        <tr>
          <td>列表</td>
          <td>多个列表部分请使用<code>section</code></td>
        </tr>
        <tr>
          <td>底部</td>
          <td>底部显示页码及其他提示信息</td>
        </tr>
      </table>
      <p>一般内容列表视图</p>
      <div contenteditable="false" spellcheck="false" class="segment no-padding">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Contents List &nbsp;<small>26 articles</small></h3>
          </header>
          <section class="items items-hover">
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>一个更紧凑的视图</p>
      <div contenteditable="true" spellcheck="false" class="segment no-padding">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list list-condensed">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Contents List &nbsp;<small>26 articles</small></h3>
          </header>
          <section class="items items-hover">
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>带项目缩略图</p>
      <div contenteditable="false" spellcheck="false" class="segment no-padding">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Contents List &nbsp;<small>26 articles</small></h3>
          </header>
          <section class="items items-hover">
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-left">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-left">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-right">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-right">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media">
                  <div class="media-place-holder" style="height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media">
                  <div class="media-place-holder" style="height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
    </section>
  </article>
</body>
